<template>
  <!-- 表单区域 -->
  <el-form :inline="true" class="demo-form-inline">
    <el-form-item label="题目ID：">
      <el-input v-model="queryForm.questionId" placeholder="请输入题目ID"></el-input>
    </el-form-item>
    <el-form-item label="题目内容：">
      <el-input v-model="queryForm.questionContent" placeholder="请输入题目内容"></el-input>
    </el-form-item>
    <el-form-item label="年级：">
      <el-select v-model="queryForm.grade" placeholder="请选择年级">
        <el-option label="一年级" value="一年级" />
        <el-option label="二年级" value="二年级" />
        <el-option label="三年级" value="三年级" />
        <el-option label="初一" value="初一" />
        <el-option label="初二" value="初二" />
        <el-option label="初三" value="初三" />
        <el-option label="高一" value="高一" />
        <el-option label="高二" value="高二" />
        <el-option label="高三" value="高三" />
        <!-- 根据实际需求添加更多选项 -->
      </el-select>
    </el-form-item>
    <el-form-item label="学科：">
      <el-select v-model="queryForm.subject" placeholder="请选择学科">
        <el-option label="数学" value="数学" />
        <el-option label="语文" value="语文" />
        <!-- 根据实际需求添加更多选项 -->
      </el-select>
    </el-form-item>
    <el-form-item label="题型：">
      <el-select v-model="queryForm.questionType" placeholder="请选择题型">
        <el-option label="单选题" value="单选题" />
        <el-option label="多选题" value="多选题" />
        <el-option label="判断题" value="判断题" />
        <el-option label="填空题" value="填空题" />
        <el-option label="简答题" value="简答题" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleQuery">查询</el-button>
      <el-button type="primary" @click="handleAdd">添加</el-button>
    </el-form-item>
  </el-form>

  <!-- 列表区域 -->
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="id" label="ID" width="50" />
    <el-table-column prop="subject" label="学科" />
    <el-table-column prop="questionType" label="题型" />
    <el-table-column prop="questionContent" label="题干" />
    <el-table-column prop="score" label="分数" />
    <el-table-column prop="difficulty" label="难度" />
    <el-table-column prop="createTime" label="创建时间" />
    <el-table-column label="操作" width="200">
      <template #default="scope">
        <el-button size="small" @click="handlePreview(scope.row)">预览</el-button>
        <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页区域 -->
  <el-pagination
    background
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    :page-size="pageSize"
    :current-page="currentPage"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useLevelStore } from "@/store/level"
import { probPage, type ProbParamsType, type ProbItemType } from '@/api/paper' // 这是获取题目列表的接口


// 查询表单数据
const queryForm = reactive({
  questionId: '',
  questionContent: '',
  grade: '',
  subject: '',
  questionType: ''
})

// 表格数据
const params = ref<ProbParamsType>({
  id: null,
  questionType: null,
  level: null,
  subjectId: null,
  pageIndex: 1,
  pageSize: 10
})
const tableData = ref<ProbItemType[]>([])

//请求题目列表的借口
function getProbList() {
  probPage(params.value).then(res => {
    console.log(res, "probList");
    if (res.code === 1) {
      tableData.value = (res.response?.list as ProbItemType[])
    }
  })
}
getProbList()

// 分页相关
const total = ref(14) // 总条数
const pageSize = ref(10) // 每页显示条数
const currentPage = ref(1) // 当前页码

// 查询方法
const handleQuery = () => {
  console.log('queryForm:', queryForm)
  // 根据 queryForm 进行查询操作
  // 更新 tableData 数据
}

// 添加方法
const handleAdd = () => {
  // 跳转到添加页面或弹出添加对话框
  console.log('add')
}

// 预览方法
const handlePreview = (row: any) => {
  console.log('preview', row)
  // 实现预览逻辑
}

// 编辑方法
const handleEdit = (row: any) => {
  console.log('edit', row)
  // 实现编辑逻辑
}

// 删除方法
const handleDelete = (row: any) => {
  console.log('delete', row)
  // 实现删除逻辑
}

// 分页大小改变时触发
const handleSizeChange = (val: number) => {
  console.log(`每页 ${val} 条`)
  pageSize.value = val
  // 重新获取数据
}

// 当前页码改变时触发
const handleCurrentChange = (val: number) => {
  console.log(`当前页: ${val}`)
  currentPage.value = val
  // 重新获取数据
}
</script>

<style scoped>
/* 样式可以根据需要进行调整 */
</style>